<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>融媒体内容生产方法与实践作业</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?d54f110c773cfc933a9acea59426a0ff";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>
<style>
    body {
        background-image: url(resource/img/OHR.BeardedTit_ZH-CN0065279700_1920x1080.jpg);

    }

    .container {
        width: 80%;
        max-width: 1000px;
        margin: 0 auto;


    }

    .title {
        text-align: center;
        margin: 64px 0;
    }

    .flex-box {
        display: flex;
        flex-wrap: wrap;


    }

    ul.flex-box {
        list-style: none;
        gap: 16px 16px;
    }

    ul.flex-box li {
        width: 32%;
        height: 100px;
        background-color: antiquewhite;
        border-radius: 8px;
        position: relative;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2c6c240d181248c4dca32f3462edfcea?rik=t8Z9ypgoUBCRKw&riu=http%3a%2f%2fbpic.588ku.com%2fback_pic%2f19%2f04%2f19%2fb8185594a01aaecfbafab3419a3c04ab.jpg!%2ffh%2f300%2fquality%2f90%2funsharp%2ftrue%2fcompress%2ftrue&ehk=S4C6Kz86%2fRoVXpNXF5w1J3kIi%2fIoIBer9oaGF6eq8tw%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1);
        background-size: 100%;
        padding: 1px;



        transform: scale(1);
        transition-property: all;
        transition-duration: 0.5;
        transition-timing-function: linear;
    }

    ul.flex-box li:hover {
        transform: scale(1.1);



    }

    ul.flex-box li a {
        text-decoration: none;
        font-size: 20px;
        width: 90%;
        text-align: center;
        line-height: 3;
        text-shadow: 3px 3px 5px black;
        ;
        color: rgb(255, 253, 253);
        border-radius: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .box-3 {
            transform: scale(1.5);
            transition-property: all;
            transition-duration: 0.5;
            transition-timing-function: linear;
        }

        .box-3:hover {
            transform: scale(1);




        }
</style>


<body>
    <div class="container">

        <h1 class="title animate__animated animate__slideInLeft">《融媒体内容生产方法与实践》平时作业</h1>
      
        <ul class="flex-box animate__animated animate__slideInUp">
            <li><a href="01-html.html">html元素练习</a></li>

            <li><a href="02-css.html">CSS文字排版练习</a></li>

            <li><a href="03-css-bg-box.html">CSS背景、变量、盒模型练习</a></li>
            <li><a href="04-position-flex.html">CSS定位及布局练习</a></li>
            <li><a href="05-css-animate.html">变形、过渡及动画</a></li>
            <li><a href="06-js-basic.html">JS基础</a></li>
            <li><a href="07-js-core.html">JS核心语法</a></li>

            <li><a href="fullpage.html">fullpage.js练习</a></li>
            <li><a href="jQuery-demo3.html">jQuery.js用法</a></li>
            <li><a href="bootstrapt.html">Bootstrap核心布局练习</a></li>
            <li><a href="15-3-人物关系可视化2.html">Echarts.js用法</a></li>
        </ul>

     
    </div>
</body>

</html>